import QtQuick 2.0
import QtMultimedia 5.12

//Qt Quick Controls模块提供了大量类似Qt Widgets模块的可重用组件。
import QtQuick.Controls 2.0

Item {
    id:mainWid
    anchors.fill: parent
    width: 1000
    height: 588
    z:1

    property int playNum : 1
    property bool ones : true
    signal buttonClick(var t1)
    signal videoNum(var t1)

    ProgressBar{
        id : videoProgressBar
        from: 0.0
        to:100
        value: 0
        width: 1000
        height: 4
        x:0
        y:676
        z:6

        background: Rectangle {   //背景项
              implicitWidth: videoProgressBar.width
              implicitHeight: videoProgressBar.height
              color: "#DDDDDD"
              radius: 3 //圆滑度
          }

          contentItem: Item {   //内容项
              Rectangle {
                  width: videoProgressBar.visualPosition * videoProgressBar.width
                  height: videoProgressBar.height
                  radius: 2
                  color: "#3790FA"
              }
          }
    }


    //! 加载四个视频(无动画)
    Item {
        id:mediaPlayer
        anchors.fill: parent
        width: 1000
        height: 588
        z:3

        MediaPlayer {
            id: player01
            autoPlay: true
            playlist: Playlist {
                id: playlist
            }

            //! 视频播放的停止信号,停止后先看播放的视频是第几个
            //! 然后停留在这个视频的首帧
            onStopped: {
                updateEndImage()
            }

        }

        VideoOutput {
            anchors.fill: parent
            source: player01
        }

    }

    //! 可选择页面的初始化,初始化后为隐藏
    SwitchAppVideo{
        id:animationwid
        x:442
        y:73
        z:4
        visible: false
    }

    //功能主要是设置视频最后一帧
    Image {
        id: videoEndImage
        visible: false
    }

    //! 左侧文字描述
    Item {
        id: leftTextItem
        width: 341;
        height: 315
        z:4

        // 欢迎界面介绍Text
        WelcomeTextWidget {
            id: welcomeText
            visible: false
            color: "transparent"

            //移动位置
            x:40
            y:146
        }

        // KylinId Text
        KylinIdTextWidget {
            id: kylinIdText
            visible: false
            color: "transparent"

            //移动位置
            x:40
            y:146
        }

        // 软件商店 Text
        AppStoreTextWidget {
            id: appStoreText
            visible: false
            color: "transparent"

            //移动位置
            x:40
            y:146
        }

        // 安卓应用介绍Text
        AndroidTextWidget {
            id: androidText
            visible: false
            color: "transparent"

            //移动位置
            x:40
            y:146
        }

        // 五个应用描述 Text
        ApplicationTextWidget {
            id: applicationText
            visible: false
            color: "transparent"

            //移动位置
            x:40
            y:146
        }

        // 用户手册 text
        HandBookTextWidget {
            id: handBookText
            visible: false
            color: "transparent"

            //移动位置
            x:40
            y:146
        }
    }

    //切换按钮
    Item {
        id: switchButtonItem

        z:3
        // 右切换按钮
        SwitchButton{
            id:rIcon

            //移动位置
            x:508
            y:628

            Image {
                id: rIconImage
                opacity:1
                source: "/Icon/righticon.svg"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    // 根据 mainWid.playNum 来判断视频播放第几个
                    // 如果超过现有视频，按钮置灰，不发送点击事件
                    if (mainWid.playNum < 6) {
                        rIconImage.opacity = 1
                        lIconImage.opacity = 1
                        mainWid.buttonClick("right");
                        if ((mainWid.playNum +1) > 6) {
                            rIconImage.opacity = 0.5
                        }
                    }
                }
            }
        }

        // 左切换按钮
        SwitchButton{
            id:lIcon

            //移动位置
            x:456
            y:628

            Image {
                id: lIconImage
                opacity: 0.5
                source: "/Icon/lefticon.svg"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    // 根据 mainWid.playNum 来判断视频播放第几个
                    // 如果超过现有视频，按钮置灰，不发送点击事件
                    if (mainWid.playNum >1) {
                        lIconImage.opacity = 1
                        rIconImage.opacity = 1
                        mainWid.buttonClick("left");
                        if (mainWid.playNum <=1) {
                            lIconImage.opacity = 0.5
                        }
                    }
                }
            }
        }
    }

    //根据当前播放的视频插入视频最后一帧图片
    function updateEndImage(){
        //贴图片,根据标志位
        if (mainWid.playNum === 1) {
            videoEndImage.source = "/media/picture/01-end.png"

        } else if (mainWid.playNum === 2) {
            videoEndImage.source = "/media/picture/02-end.png"

        } else if (mainWid.playNum === 3) {
            videoEndImage.source = "/media/picture/03-end.png"

        } else if (mainWid.playNum === 4) {
            videoEndImage.source = "/media/picture/04-end.png"

        } else if (mainWid.playNum === 5) {
            videoEndImage.source = ""

        } else if (mainWid.playNum === 6) {
            videoEndImage.source = "/media/picture/06-end.png"

        }
        videoEndImage.visible = true

    }

    //播放切换动作
    function switchAction (t1) {

        if (t1 === "right") {
            mainWid.playNum ++

        } else {
            mainWid.playNum --
        }
        //发送信号给文字去更新
        mainWid.videoNum(mainWid.playNum);

        //播放视频
        playMedia(mainWid.playNum)

        console.log(mainWid.playNum)

        //更新滑动条数据
        changeProgressBar(mainWid.playNum)
    }

    //根据全局变量 playNum 来选择播放的视频
    function playMedia(){

        //先隐藏最后一帧图片
        videoEndImage.visible = false

        //上一个视频暂停
        player01.stop()

        //playlist 列表清除
        player01.playlist.clear()

        //根据当前要播放的标志位，加载对应播放路径
        if (mainWid.playNum === 1) {
            animationwid.visible = false
            player01.playlist.addItem("qrc:/media/01.mp4")

        } else if (mainWid.playNum === 2) {
            animationwid.visible = false
            player01.playlist.addItem("qrc:/media/02.mp4")

        } else if (mainWid.playNum === 3) {
            animationwid.visible = false
            player01.playlist.addItem("qrc:/media/03.mp4")

        } else if (mainWid.playNum === 4) {
            animationwid.visible = false
            player01.playlist.addItem("qrc:/media/04.mp4")

        } else if (mainWid.playNum === 5) {
            animationwid.visible = true
            if (ones) {
                // 首次启动移动两个位置
                ones = false
                animationwid.firstInitAni();
            }

        } else if (mainWid.playNum === 6) {
            animationwid.visible = false
            player01.playlist.addItem("qrc:/media/06.mp4")
        }

        //播放视频
        player01.play()
    }

    //根据信号改变文案
    function changeText (t1) {

        if (t1 === 1) {
            //欢迎页面
            welcomeText.visible = true
            kylinIdText.visible = false
            appStoreText.visible = false
            androidText.visible = false
            applicationText.visible = false
            handBookText.visible = false

        } else if (t1 === 2) {
            //麒麟ID
            welcomeText.visible = false
            kylinIdText.visible = true
            appStoreText.visible = false
            androidText.visible = false
            applicationText.visible = false
            handBookText.visible = false

        } else if (t1 === 3) {
            //软件商店
            welcomeText.visible = false
            kylinIdText.visible = false
            appStoreText.visible = true
            androidText.visible = false
            applicationText.visible = false
            handBookText.visible = false
        } else if (t1 === 4) {
            //安卓应用
            welcomeText.visible = false
            kylinIdText.visible = false
            appStoreText.visible = false
            androidText.visible = true
            applicationText.visible = false
            handBookText.visible = false

        } else if (t1 === 5) {
            //重新设计五个应用界面
            welcomeText.visible = false
            kylinIdText.visible = false
            appStoreText.visible = false
            androidText.visible = false
            applicationText.visible = true
            handBookText.visible = false

        } else if (t1 === 6 ) {
            // 用户手册
            welcomeText.visible = false
            kylinIdText.visible = false
            appStoreText.visible = false
            androidText.visible = false
            applicationText.visible = false
            handBookText.visible = true
        }

    }

    function changeProgressBar (t1) {
        if (t1 === 1) {
            videoProgressBar.value = 0

        } else if (t1 === 2) {
            videoProgressBar.value = 20

        } else if (t1 === 3) {
            videoProgressBar.value = 40

        } else if (t1 === 4) {
            videoProgressBar.value = 60

        } else if (t1 === 5) {
            videoProgressBar.value = 80

        } else if (t1 === 6 ) {
            videoProgressBar.value = 100

        }
    }


    //! 播放第一个视频,并且关联 buttonClick 信号 与 switchAction 槽函数
    Component.onCompleted: {
        playMedia()
        welcomeText.visible = true                    //首先展示欢迎页面的文字
        mainWid.buttonClick.connect(switchAction)     //连接视频切换
        mainWid.videoNum.connect(changeText)          //连接文案改变槽
    }
}
